<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/user' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工作台</el-breadcrumb-item>
      <el-breadcrumb-item>个人OA管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row>
        <el-col :span="9">
          <!-- 3.定义搜索框 -->
          <el-input placeholder="请输入OA标题(支持模糊查询)" v-model="queryInfo.query" clearable @clear="getOAList">
            <el-button slot="append" icon="el-icon-search" @click="getOAList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>我提交的OA申请</span>
              <el-button style="float: right" type="primary" size="medium" @click="AddOAFormVisible = true">发起OA申请
              </el-button>
            </div>
            <el-table :data="LeaveOAByUserList" border stripe fit>
              <el-table-column type="index" label="OA编号" width="100"></el-table-column>
              <el-table-column prop="itemName" label="OA事项" width="130"></el-table-column>
              <!--              <el-table-column prop="submitter" label="提交人"></el-table-column>-->
              <el-table-column prop="sortingId" label="oa分类" width="100"
                               :formatter="sortingIdFormater"></el-table-column>
              <el-table-column prop="approver" label="审核人"></el-table-column>
              <el-table-column prop="itemCause" label="事由" width="300"></el-table-column>
              <el-table-column prop="startTime" label="开始日期" :formatter="dateFormat" width="190"></el-table-column>
              <el-table-column prop="endTime" label="结束日期" :formatter="dateFormat" width="190"></el-table-column>
              <el-table-column prop="itemStatus" label="OA状态" width="100"
                               :formatter="itemStatusFormater"></el-table-column>
              <el-table-column prop="comments" label="审核回复"></el-table-column>
              <el-table-column label="操作" prop="setSubStatus" width="180" fixed="right">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="getOaById(scope.row)" :disabled="scope.row.subStatus">修改</el-button>
                  <el-button type="danger" size="small" @click="deleteOA(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>

          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!--新建oa表单-->
    <el-dialog title="新建OA申请" :visible.sync="AddOAFormVisible">
      <el-form :model="AddOAList" ref="AddOAList" :rules="rules">
        <el-form-item label="申请标题" :label-width="formLabelWidth" prop="itemName">
          <el-input v-model="AddOAList.itemName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="申请原因" :label-width="formLabelWidth" prop="itemCause">
          <el-input v-model="AddOAList.itemCause" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="申请类型" :label-width="formLabelWidth" prop="sortingId">
          <el-select v-model="AddOAList.sortingId" placeholder="请选择申请类型">
            <el-option label="请假" value=1></el-option>
            <el-option label="出差" value=2></el-option>
            <el-option label="离职" value=3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期" :label-width="formLabelWidth" prop="startTime">
          <el-date-picker type="datetime" format="yyyy年MM月dd日HH时mm分" v-model="AddOAList.startTime"
                          :picker-options="pickerOptions0"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" :label-width="formLabelWidth" prop="endTime">
          <el-date-picker type="datetime" format="yyyy年MM月dd日HH时mm分" v-model="AddOAList.endTime"
                          :picker-options="pickerOptions1"></el-date-picker>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <h6>注意:离职开始日期为申请提交日期,结束日期为离职日期</h6>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="AddOAFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOABtn">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改OA表单-->
    <el-dialog title="修改OA表单" :visible.sync="updateOAVisible">
      <el-form :model="getOaByIdList" ref="getOaByIdList" :rules="rules1">
        <el-form-item label="申请标题" :label-width="formLabelWidth" prop="itemName">
          <el-input v-model="getOaByIdList.itemName"></el-input>
        </el-form-item>
        <el-form-item label="申请原因" :label-width="formLabelWidth" prop="itemCause">
          <el-input v-model="getOaByIdList.itemCause"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" :label-width="formLabelWidth" prop="startTime">
          <el-date-picker type="datetime" format="yyyy年MM月dd日HH时mm分" v-model="getOaByIdList.startTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" :label-width="formLabelWidth" prop="endTime">
          <el-date-picker type="datetime" format="yyyy年MM月dd日HH时mm分" v-model="getOaByIdList.endTime"></el-date-picker>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <h6>注意:离职开始日期为申请提交日期,结束日期为离职日期</h6>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateOAVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOABtn">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import moment from "moment";

export default {
  name: 'Business',
  data() {
    return {
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.AddOAList.endTime !== "") {
            // console.log(time.getTime())
            return time.getTime() > new Date(this.AddOAList.endTime).getTime() - 45000000;
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.AddOAList.startTime !== "") {
            return time.getTime() < new Date(this.AddOAList.startTime).getTime() - 45000000;
          }
        }
      },
      //定义添加OA表单的规则判定
      rules: {
        itemName: [
          {required: true, message: '请输入OA申请标题', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        itemCause: [
          {required: true, message: '请输入OA申请原因', trigger: 'blur'},
          {min: 15, max: 100, message: '长度在 15 到 100 个字符', trigger: 'blur'}
        ],
        sortingId: [
          {required: true, message: '请选择活动区域', trigger: 'change'}
        ],
        startTime: [
          {type: 'date', required: true, message: '请选择申请开始日期', trigger: 'change'}
        ],
        endTime: [
          {type: 'date', required: true, message: '请选择申请结束日期', trigger: 'change'}
        ]
      },
      rules1: {
        itemName: [
          {required: true, message: '请输入OA申请标题', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        itemCause: [
          {required: true, message: '请输入OA申请原因', trigger: 'blur'},
          {min: 15, max: 100, message: '长度在 15 到 100 个字符', trigger: 'blur'}
        ],
        // startTime: [
        //   {type: 'date', required: true, message: '请选择申请开始日期', trigger: 'change'}
        // ],
        // endTime: [
        //   {type: 'date', required: true, message: '请选择申请结束日期', trigger: 'change'}
        // ]
      },
      LeaveOAByUserList: [],
      getOaByIdList: [],
      AddOAList: {
        itemName: '',
        itemCause: '',
        sortingId: '',
        submitterId: '',
        startTime: '',
        endTime: ''
      },
      formLabelWidth: '120px',
      updateBtnVisible: false,
      AddOAFormVisible: false,
      updateOAVisible: false,
      queryInfo: {
        userRole: '',
        empId: '',
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      total: 0,
    }
  },
  methods: {
    async getOAList() {
      this.queryInfo.userRole = 'submitter_id'
      this.queryInfo.empId = this.$cookies.get('empId')
      const {data: result} = await this.$http.get('/user/list', {
        params: this.queryInfo
      })
      if (result.status !== 200) return this.$message.error("OA列表查询失败")
      this.LeaveOAByUserList = result.data.rows
      // console.log(this.LeaveOAByUserList)
      this.total = result.data.total
      // console.log("总记录数:" + this.total)
    },

    //根据id修改OA
    async getOaById(oaApprove) {
      const OAId = oaApprove.id
      const {
        data: result
      } = await this.$http.get(`/user/getOaById/${OAId}`)
      if (result.status !== 200) return this.$message.error('OA列表查询失败')
      this.getOaByIdList = result.data
      this.getOaByIdList.sortingId = null
      this.updateOAVisible = true
      // console.log(this.getOaByIdList)


    },
    handleSizeChange(pageSize) {
      //console.log("每页展现的条数"+pageSize)
      this.queryInfo.pageSize = pageSize
      this.getOAList()
    },
    handleCurrentChange(pageNum) {
      //console.log("页数:"+pageNum)
      this.queryInfo.pageNum = pageNum
      this.getOAList()
    },
    addOABtn() {
      this.$refs.AddOAList.validate(async valid => {
        //如果校验失败 则停止数据
        if (!valid) return
        this.AddOAList.submitterId = this.$cookies.get('empId')
        const {data: result} =
          await this.$http.post('/user/submitOA', this.AddOAList)
        if (result.status !== 200) return this.$message.error("OA提交失败")
        this.$message.success("OA提交成功")
        //重新获取用户列表
        await this.getOAList()
        // this.AddOAList=null
        //关闭对话框
        this.AddOAFormVisible = false

      })
    },
    updateOABtn() {
      this.$refs.getOaByIdList.validate(async valid => {
        //如果校验失败 则停止数据
        if (!valid) return
        // this.getOaByIdList.submitterId = this.$cookies.get('empId')
        const {data: result} =
          await this.$http.put('/user/updateOA', this.getOaByIdList)
        if (result.status !== 200) return this.$message.error("OA修改失败")
        this.$message.success("OA修改成功")
        //重新获取用户列表
        await this.getOAList()
        //关闭对话框
        this.updateOAVisible = false

      })
    },
    //用于时间格式化
    dateFormat: function (row, column) {
      const date = row[column.property];
      if (date === null) {
        return "";
      }
      // console.log("row" +row)
      return moment(date).format("YYYY-MM-DD HH:mm");
      // return moment(date).format('lll');
      // return moment.locale();
    },
    //用于OA状态的选择
    sortingIdFormater(row) {
      // console.log(row)
      switch (row.sortingId) {
        case 1:
          return <el-tag>请假</el-tag>
        case 2:
          return <el-tag type="warning">出差</el-tag>
        case 3:
          return <el-tag type="danger">离职</el-tag>
        default:
          return <el-tag type="success">其他</el-tag>
      }
    },
    itemStatusFormater(row) {
      // console.log(row)
      switch (row.itemStatus) {
        case 1:
          return <el-tag>正在审批</el-tag>
        case 2:
          return <el-tag type="success">通过</el-tag>
        case 3:
          return <el-tag type="danger">未通过</el-tag>
        default:
          return <el-tag type="warning">其他</el-tag>
      }
    },
    async deleteOA(oaApprove) {
      //1.消息确认框
      const result = await this.$confirm('此操作将永久删除 ' + oaApprove.itemName + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)

      //如果确认  confirm  如果取消 cancel
      if (result !== 'confirm') {
        return this.$message.info("删除取消")
      }
      const {data: result2} = await this.$http.delete(`/user/deleteOA/${oaApprove.id}`)
      if (result2.status !== 200) return this.$message.error("删除失败")
      this.$message.success("删除成功")
      //重新加载 数据
      await this.getOAList()
    }
  },
  created() {
    //1.获取oa列表数据
    this.getOAList()
  },
}
</script>

<style scoped>

</style>
